<template>
  <div class="fixed top-4 right-4 z-50">
    <TransitionGroup 
      name="message"
      tag="div"
      class="flex flex-col gap-2"
    >
      <div
        v-for="msg in messages"
        :key="msg.id"
        :class="[
          'px-4 py-2 rounded-lg shadow-lg min-w-[300px] transition-all duration-300',
          messageTypeClass(msg.type)
        ]"
      >
        <div class="flex items-center gap-2">
          <component :is="messageIcon(msg.type)" class="w-5 h-5" />
          <span>{{ msg.content }}</span>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref,defineExpose } from 'vue'
import { ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon } from '@heroicons/vue/24/solid'

const messages = ref([])
let messageId = 0

const messageTypeClass = (type) => {
  switch (type) {
    case 'BUG':
      return 'bg-red-100 text-red-800 border border-red-200'
    case 'WARN':
      return 'bg-yellow-100 text-yellow-800 border border-yellow-200'
    case 'INFO':
    default:
      return 'bg-blue-100 text-blue-800 border border-blue-200'
  }
}

const messageIcon = (type) => {
  switch (type) {
    case 'BUG':
      return ExclamationCircleIcon
    case 'WARN':
      return ExclamationTriangleIcon
    case 'INFO':
    default:
      return InformationCircleIcon
  }
}

const showMessage = (content, type = 'INFO', duration = 3000) => {
  const msg = {
    id: messageId++,
    content,
    type
  }
  messages.value.push(msg)
  
  setTimeout(() => {
    messages.value = messages.value.filter(m => m.id !== msg.id)
  }, duration)
}

// 导出方法供其他组件使用
defineExpose({
  showMessage
})
</script>

<style scoped>
.message-enter-active,
.message-leave-active {
  transition: all 0.3s ease;
}

.message-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.message-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
